<template>
  <KView class="personal-circle">
    <KView class="personal-circle-content" v-if="isShow">
      <KView class="personal-circle-bg">
        <img :src="bgImg" mode="widthFix">
      </KView>
      <KView class="personal-circle-info">
        <KView class="personal-circle-header">
          <span>个人资料</span>
          <KView class="personal-circle-header-svg personal-circle-back">
            <KButton class="personal-circle-header-btn" @click="toBack">
              <sys-svg name="arrowLeft" color="#ffffff"></sys-svg>
            </KButton>
          </KView>
          <KView class="personal-circle-header-svg personal-circle-share" :class="{'unrelease-circle':!hasRelease}">
            <KButton v-if="isMiniprogram" class="personal-circle-header-btn" open-type="share">
              <sys-svg name="share2" color="#ffffff"></sys-svg>
            </KButton>
            <KButton v-else class="personal-circle-header-btn">
              <sys-svg name="share2" color="#ffffff"></sys-svg>
            </KButton>
          </KView>
          <KView v-if="hasRelease" class="personal-circle-header-svg personal-circle-camera">
            <KButton class="personal-circle-header-btn" @click="toReleaseCircle">
              <sys-svg name="camera" color="#ffffff"></sys-svg>
            </KButton>
          </KView>
        </KView>
        <KView class="personal-circle-avatar-div">
          <KView class="personal-circle-avatar">
            <sys-avatar :url="personalData.url" shape="circle"></sys-avatar>
          </KView>
          <KView class="personal-circle-avatar-name">{{personalData.name}}</KView>
        </KView>
      </KView>
      <personal-circle-stat :stat-data="personalData"></personal-circle-stat>
      <KView class="personal-circle-line"></KView>

      <KView class="personal-circle-zone">
        <circle-zone-view ref="zoneView" :pagination="pagination" :circle-list="circleZoneList" :has-avatar="false" :next-data-fun="setCircleZoneList"
          @praise-circle-success="resetStatData"></circle-zone-view>
      </KView>
    </KView>

    <sys-dialog isCenter isMiddle :visible.sync="openDialog" :width="600" :height="610" :destroy-on-close="false" animation-name="bottom">
      <bind-phone-tip @to-bind="toBindPhone" @close="closeTip"></bind-phone-tip>
    </sys-dialog>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import Pagination from 'models/pagination';

  import SysSvg from 'common/sysSvg';
  import SysAvatar from 'common/sysAvatar';
  import SysDialog from 'common/sysDialog';
  import CircleZoneView from 'views/sysCircle/components/circleZoneView';
  import PersonalCircleStat from './personalCircleStat';
  import BindPhoneTip from './bindPhoneTip';

  import storeMixins from 'mixins/storeMixins';
  import sysCircleMixins from 'mixins/sysCircleMixins';
  import SystemUtil from 'utils/systemUtil';
  import SysCircleApi from 'services/sysCircleApi';

  export default {
    mixins: [storeMixins, sysCircleMixins],

    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      let imgData = GlobalData.images.sysCircle;
      return {
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        bgImg: imgData.bg,
        personalData: null,
        unionid: null,
        hasRelease: false,
        circleId: null,
        pagination: null,
        openDialog: false
      };
    },

    created() {
      let query = this.$route.query;
      let unionid = query.unionid;
      if (unionid === undefined) {
        unionid = this.user.unionid;
        this.hasRelease = true;
      } else {
        this.hasRelease = unionid === this.user.unionid;
      }
      this.unionid = unionid;

      let id = query.id;
      if (id === undefined) {
        id = null;
      }
      this.circleId = id;

      let pagination = new Pagination();
      SystemUtil.showLoading();
      window.Promise.all([
        this.setPersonalData(),
        this.setCircleZoneList(true, pagination)
      ]).then(() => {
        this.pagination = pagination;
        this.isShow = true;
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });

      window.onShareAppMessage = data => {
        let from = data.from;
        let id = data.target ? data.target.id : '';
        if (from === 'menu' || id.indexOf('type_') !== 0) {
          let spaceId = this.circleId;
          let url;
          if (spaceId === null) {
            url = `/personalCircle?unionid=${this.unionid}`;
          } else {
            url = `/personalCircle?unionid=${this.unionid}&id=${spaceId}`;
          }
          return {
            path: url
          }
        }

        let shareData = this.$refs['zoneView'].getShareData(id);
        return shareData;
      };
    },

    methods: {
      setPersonalData() {
        return SysCircleApi.getPersonalStatData(this.unionid).then(personalData => {
          this.personalData = personalData;
          return personalData;
        });
      },

      setCircleZoneList(isInit = false, pagination = null) {
        if (pagination === null) {
          pagination = this.pagination;
        }

        let circleId = this.circleId;
        if (circleId !== null) {
          return SysCircleApi.getCircleZoneById(circleId).then(circleZone => {
            pagination.totalCount = 1;
            let circleZoneList = [circleZone];
            return this.resetCircleZoneList(circleZoneList, true);
          });
        }

        return SysCircleApi.getCircleZoneData(pagination, 2, {
          unionid: this.unionid
        }).then(circleZoneList => {
          return this.resetCircleZoneList(circleZoneList, isInit);
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          wx.navigateBack();
        } else {
          this.$emit('to-page', '/home');
        }
      },

      toReleaseCircle() {
        if (this.user.phoneNum === '') {
          this.openDialog = true;
          return;
        }

        if (this.isMiniprogram) {
          window.open('/releaseCircle');
        }
      },

      toBindPhone() {
        if (this.isMiniprogram) {
          window.open('/bindPhone?type=circle');
        }
      },

      bindPhoneSuccess() {
        this.closeTip();
        if (this.isMiniprogram) {
          window.open('/releaseCircle');
        }
      },

      closeTip() {
        this.openDialog = false;
      },

      releaseCircleSuccess() {
        let circleId = this.circleId;
        if (circleId !== null) {
          return;
        }

        SystemUtil.showLoading('');
        window.Promise.all([
          this.setPersonalData(),
          this.resetCircleZoneData()
        ]).then(() => {
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      resetCircleZoneData() {
        let pagination = this.pagination;
        return SysCircleApi.getCircleZoneData(pagination, 2, {
          unionid: this.unionid
        }, true).then(circleZoneList => {
          return this.resetCircleZoneList(circleZoneList, true, true);;
        });
      },

      resetStatData() {
        SystemUtil.showLoading('');
        this.setPersonalData().then(() => {
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      resetCircleZoneLogById(logData){
        let circle = this.getCircleZoneObjById(logData.spaceId);
        if (circle !== null) {
          circle.resetCircleLogStatusData(logData);
        }
      },

      resetCircleZoneLog(spaceId){
        let circle = this.getCircleZoneObjById(spaceId);
        if (circle !== null) {
          this.$refs['zoneView'].resetCircleZoneLog(circle);
        }
      }
    },

    components: {
      SysSvg,
      SysAvatar,
      SysDialog,
      CircleZoneView,
      PersonalCircleStat,
      BindPhoneTip
    }
  };

</script>

<style lang="scss">
  .personal-circle {
    height: 100%;

    .personal-circle-line {
      height: 1px;
      background: #DADADA;
    }

    .personal-circle-bg {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      z-index: -1;

      >img {
        width: 100%;
      }
    }

    .personal-circle-content {
      overflow: auto;
      height: 100%;
      position: relative;

      .personal-circle-info {
        padding-top: formatPx(50);
        height: formatPx(450);

        .personal-circle-header {
          height: formatPx(50);
          line-height: formatPx(50);
          position: relative;
          text-align: center;
          color: #ffffff;
          font-size: formatPx(36);

          .personal-circle-header-svg {
            position: absolute;
            height: formatPx(50);
            width: formatPx(50);

            .personal-circle-header-btn {
              width: 100%;
              height: 100%;
              padding: 0;
              background: none;
              border: none;

              &:active {
                background: none;
              }
            }
          }

          .personal-circle-back {
            left: formatPx(30);
            top: 0;
            width: formatPx(38);
          }

          .personal-circle-share {
            right: formatPx(110);
            top: 0;

            &.unrelease-circle {
              right: formatPx(30);
            }
          }

          .personal-circle-camera {
            right: formatPx(30);
            top: 0;
          }
        }

        .personal-circle-avatar-div {
          margin-top: formatPx(70);
          text-align: center;

          .personal-circle-avatar {
            width: formatPx(134);
            height: formatPx(134);
            border: 2px solid #ffffff;
            border-radius: 50%;
            display: inline-block;
          }

          .personal-circle-avatar-name {
            color: #ffffff;
            font-size: formatPx(30);
            margin-top: formatPx(10);
          }
        }
      }

      .personal-circle-stat {
        margin-top: formatPx(40);
        margin-bottom: formatPx(40);
      }

      .personal-circle-zone {
        margin-top: formatPx(40);
        max-height: calc(100% - #{formatPx(210)});
        overflow: auto;
      }
    }
  }

</style>
